<script setup lang="ts">
import { ref } from "vue"
interface Props {
  ifm: any
}
const props = withDefaults(defineProps<Props>(), {
  ifm: null
})
const { ipcRenderer } = require('electron')
const btn = ref(false)
const setting = ref(false)
</script>

<template>
<div :style="{ width: btn ? '0px' : '60px' }" class="bar-btn">
  <div class="show" @click="btn = !btn">
    <el-icon v-if="btn"><ArrowLeft /></el-icon>
    <el-icon v-else><ArrowRight /></el-icon>
  </div>
  <ul class="top">
    <!-- <li @click="ifm.contentWindow.history.back()">
      <icon-font type="icon-arrow-left" class="iconfont"/>
      返回
    </li> -->
    <!-- <li @click="ifm.contentWindow.location.reload()">
      <icon-font type="icon-refresh" class="iconfont"/>
      刷新
    </li> -->
  </ul>
  <ul class="bottom">
    <li @click="ifm.contentWindow.location.reload()">
      <el-tooltip
        class="box-item"
        effect="dark"
        content="刷新"
        placement="right-start"
      >
        <svg-icon name="refresh" class-name="iconfont"></svg-icon>
      </el-tooltip>
    </li>
    <li>
      <el-popover
        ref="popover"
        placement="right"
        :width="150"
        :offset="-5"
        trigger="click"
        popper-style="padding: 10px 0;"
        @show="setting = true"
        @hide="setting = false"
      >
        <ul class="popoverList">
          <li @click="ipcRenderer.send('reload')">
            <el-icon><Refresh /></el-icon>重载
          </li>
          <li @click="ipcRenderer.send('clear')">
            <el-icon><Delete /></el-icon>清除缓存
          </li>
          <li @click="ipcRenderer.send('updated')">
            <el-icon><RefreshLeft /></el-icon>检查更新
          </li>
        </ul>
        <template #reference>
          <div>
            <el-tooltip
              class="box-item"
              effect="dark"
              content="设置"
              placement="right-start"
            >
              <svg-icon
                name="setting"
                class-name="iconfont"
                :style="{ fill: setting ? '#1b9367 !important' : '' }"
              ></svg-icon>
            </el-tooltip>
          </div>
        </template>
      </el-popover>
    </li>
    <li @click="ipcRenderer.send('close')">
      <el-tooltip
        class="box-item"
        effect="dark"
        content="退出"
        placement="right-start"
      >
        <svg-icon name="quit" class-name="iconfont"></svg-icon>
      </el-tooltip>
    </li>
  </ul>
</div>
</template>

<style lang="scss" scoped>
.bar-btn {
  position: relative;
  display: flex;
  display: -webkit-flex;
  flex-direction: column;
  justify-content: space-between;
  background-color: #fff;
  border-right: 1px solid #e9e9e9;
  z-index: 2;
  transition: width 0.3s;
  .show {
    display: flex;
    display: -webkit-flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    right: -21px;
    bottom: 50px;
    width: 20px;
    height: 30px;
    line-height: 30px;
    color: white;
    background-color: #ccc;
    text-align: center;
    border-radius: 0 4px 4px 0;
    cursor: pointer;
  }
  .top, .bottom {
    overflow: hidden;
    width: 100%;
    padding: 20px 0;
    li {
      text-align: center;
      font-size: 14px;
      line-height: 1.4em;
      margin: 0 0 20px;
      cursor: pointer;
    }
  }
  .bottom {
    li {
      margin: 20px 0 0;
      font-size: 24px;
    }
  }
  .top {
    li {
      font-size: 12px;
      color: #8f8d8d;
      .iconfont {
        font-size: 24px;
        display: block;
        margin-bottom: 2px;
      }
      &:hover {
        color: #1b9367;
        fill: #1b9367; 
        .iconfont {
          color: #1b9367;
          fill: #1b9367; 
        }
      }
    }
  }
}
:deep(.el-popover) {
  .el-popper {
    padding: 0;
  }
}
.popoverList {
  li {
    text-align: left;
    font-size: 14px;
    line-height: 1.2em;
    cursor: pointer;
    padding: 10px 15px;

    &:hover {
      background-color: #e9e9e9;
    }

    .el-icon{
      vertical-align: middle;
      margin-top: -2px;
      margin-right: 5px;
    }
  }
}
:deep(.iconfont) {
  fill: #8f8d8d !important;
  &:hover {
    fill: #1b9367 !important;
  }
}
</style>
